<template>
  <div class="editCont">
    <div class="edt1" @click="back">
      <img
        style="width: 29px; height: 25px; opacity: 0.5; cursor: pointer"
        src="../../assets/back.png"
      />
      <span>查看详情</span>
    </div>
    <div class="hx"></div>
    <div class="edt2">
      <div style="display: inline-flex; margin-left: 40px; margin-top: 44px">
        <div class="sx"></div>
        <span class="sxzt">票据信息</span>
      </div>
      <div class="tag">
        <span v-if="orderStatus == 1">贴现中</span>
        <span v-if="orderStatus == 0">待确认</span>
        <span v-if="orderStatus == 2">已完成</span>
        <span v-if="orderStatus == 3">已过期</span>
         <span v-if="orderStatus == 4">已驳回</span>
      </div>
      <div>
        <span style="color: #f44336; margin-left: 200px; font-size: 16px"
          >倒计时:{{ countdown }}</span
        >
      </div>
      <div>
        <div class="lfwz">
          <p>
            <span class="lfwzsp">票号:</span
            ><span class="lzp">{{ billInfo.billNumber }}</span>
          </p>
          <p>
            <span class="lfwzsp">票面金额:</span
            ><span class="lzp">{{ billInfo.billMoney }}万元</span>
          </p>
          <p>
            <span class="lfwzsp">承兑人:</span
            ><span class="lzp">{{ billInfo.acceptor }}</span>
          </p>
           <p>
            <span class="lfwzsp">承兑行行号:</span
            ><span class="lzp">{{ transInfo.acceptBankNumber }}</span>
          </p>
          <p>
            <span class="lfwzsp">到期日:</span
            ><span class="lzp">{{ billInfo.expireTime }}</span>
          </p>
        </div>
        <div class="rgftu">
          <div  style="display: grid;">
            <img :src="billInfo.imgUrl"  style="width:390px;height:232px"/>
            <span class="pj">票据正面</span>
          </div>
          <!-- <div>
            <img src="../../assets/tuc2.png" />
            <span class="pj">票据反面</span>
          </div> -->
        </div>
      </div>
    </div>
    <div class="hx2"></div>
    <div class="edt3">
      <div style="display: inline-flex; margin-left: 40px; margin-top: 44px">
        <div class="sx"></div>
        <span class="sxzt">交易信息</span>
      </div>
      <div class="jycts">
        <div class="jywz">
          <div>
            <span class="lfwzsp">贴现行名称:</span
            ><span class="lzp">{{ transInfo.bankName  }}</span>
          </div>
          <div>
            <span class="lfwzsp">贴现行行号:</span
            ><span class="lzp">{{ transInfo.bankNumber }}</span>
          </div>
          <div>
            <span class="lfwzsp">利率:</span
            ><span class="lzp">{{ transInfo.dealInterest }}%</span>
          </div>
          <div>
            <span class="lfwzsp">结算方式:</span
            ><span class="lzp">{{
              transInfo.settlementType == 0
                ? "线上清算"
                : transInfo.settlementType == 1
                ? "银行汇票结算方式"
                : transInfo.settlementType == 2
                ? "银行本票结算方式"
                : "支票结算方式"
            }}</span>
          </div>
        </div>
        <div class="jywz">
          <div>
            <span class="lfwzsp">贴现行名称:</span
            ><span class="lzp">{{ transInfo.bankName }}</span>
          </div>
          <div>
            <span class="lfwzsp">承兑金额:</span
            ><span class="lzp">{{ transInfo.dealPrice }}万元</span>
          </div>
          <div>
            <span class="lfwzsp">结算账户:</span
            ><span class="lzp">{{ transInfo.settlementAccount }}</span>
          </div>
        </div>
        <div class="jywz">
          <div>
            <span class="lfwzsp">委托日期:</span
            ><span class="lzp">{{ transInfo.entrustTime }}</span>
          </div>
          <div>
            <span class="lfwzsp">成交日期:</span
            ><span class="lzp">{{ transInfo.dealTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bto">
      <el-button type="primary" v-if="orderStatus == 0" @click="chenjiao"
        >成交</el-button
      >
      <el-button type="primary" plain v-if="orderStatus == 0" @click="bohui"
        >驳回</el-button
      >
    </div>
  </div>
</template>

<script>
import { getOrderDetail, updateOrderStatus } from "@/api/leagues/app";
export default {
  name: "",
  data() {
    return {
      orderStatus:"",
      countdown: "0",
      billInfo: {},
      transInfo: {},
      formm: {
        orderId: "",
        orderOperate: "",
      },
    };
  },
  //方法集合
  created() {
    this.getEdit();
  },
  methods: {
    getEdit() {
      console.log(this.$route.query, "this.$route.query");
      let orderId = this.$route.query.editRowId;
      getOrderDetail(orderId)
        .then((response) => {
          this.billInfo = response.data.data.innerBillInfo;
          this.transInfo = response.data.data.innerTransactionInfo;
          this.orderStatus = response.data.data.orderStatus;
          this.timess = response.data.data.surplusTime;
          debugger
           if (parseInt(this.timess) > 0) {
              let c = parseInt(this.timess);
             // let c = a / 1000;
              let interval_ = setInterval(() => {
                if (c >= 0) {
                  c = c - 1;
                  const hour =
                    parseInt(c / 3600) < 10
                      ? "0" + parseInt(c / 3600)
                      : parseInt(c / 3600);
                  const min =
                    parseInt((c % 3600) / 60) < 10
                      ? "0" + parseInt((c % 3600) / 60)
                      : parseInt((c % 3600) / 60);
                  const sec =
                    parseInt((c % 3600) % 60) < 10
                      ? "0" + parseInt((c % 3600) % 60)
                      : parseInt((c % 3600) % 60);
                  let Htimer = hour + ":" + min + ":" + sec;
                 this.countdown = Htimer;

                } else {
                  clearInterval(interval_);
                }
              }, 1000);
            }
        })
        .catch(() => {});
    },
    chenjiao() {
      this.formm.orderId = this.$route.query.editRowId;
      this.formm.orderOperate = "成交";
      this.$confirm("即将成交, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateOrderStatus(this.formm)
            .then((res) => {
              this.$message({
                type: "success",
                duration: 600,
                message: res.data.msg,
              });
                this.back();
            })
            .catch(() => {
              loading();
            });
        })
        .catch((res) => {
          this.$message({
            type: "info",
            duration: 600,
            message: res.data.msg,
          });
        });
    },
    bohui() {
      this.formm.orderId = this.$route.query.editRowId;
      this.formm.orderOperate = "驳回";
      this.$confirm("即将驳回, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateOrderStatus(this.formm)
            .then((res) => {
              this.$message({
                type: "success",
                duration: 600,
                message: res.data.msg,
              });
              this.back();
            })
            .catch(() => {
              loading();
            });
        })
        .catch((res) => {
          this.$message({
            type: "info",
            duration: 600,
            message: res.data.msg,
          });
           this.back();
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style  scoped>
.edt1 {
  height: 24px;
  font-size: 25px;
  font-weight: bold;
  color: #051232;
  line-height: 54px;
  margin-left: 39px;
  padding-top: 12px;
}
.bto {
  text-align: center;
  position: relative;
  bottom: -215px;
}
.pj {
  /* height: 84px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 1px 0px 0px #e6e6e6;
  display: flex;
  margin-left: 94px; */
  /* margin-top: 3px; */
    margin-top: 23px;
    text-align: center;
}
.editCont {
  width: 1200px;
  height: 890px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.hx {
  width: 1200px;
  height: 54px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 1px 0px 0px #e6e6e6;
}
.hx2 {
  width: 1200px;
  height: 54px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 1px 0px 0px #e6e6e6;
  margin-top: 181px;
}
.lzp {
  margin-left: 10px;
}
.sx {
  width: 2px;
  height: 20px;
  background: #0075ff;
}
.sxzt {
  height: 17px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 10px;
  margin-left: 10px;
  margin-top: 5px;
}
.tag {
  width: 63px;
  height: 26px;
  border: 2px solid #15be6b;
  position: relative;
  background-color: #15be6b;
  margin-left: 119px;
  margin-top: -52px;
}
.tag:before,
.tag:after {
  content: "";
  display: block;
  border-width: 7px;
  position: absolute;
  bottom: -16px;
  left: -1px;
  border-style: solid dashed dashed;
  border-color: #15be6b transparent transparent;
  font-size: 0;
  line-height: 0;
}
/* .tag:after {
  bottom: -33px;
  border-color: #fff transparent transparent;
} */
.tag span {
  width: 35px;
  height: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  line-height: 23px;
  padding-left: 7px;
}
.lfwz {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #586279;
  line-height: 36px;
  margin-top: 57px;
  margin-left: 85px;
}
.lfwzsp {
  display: inline-block;
  width: 80px;
  text-align: right;
}

.rgftu {
  float: right;
  display: inline-flex;
  margin-right: 225px;
  margin-top: -84px;
}
.jywz {
  height: 13px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #586279;
  line-height: 56px;
  margin-left: 70px;
}
.jycts {
  display: flex;
  margin-top: 13px;
}
</style>
